Declarative Shadow DOM

Shadow DOMを宣言的に書けるようにする仕様

言い換えると、JSを使わずにShadow DOMを生成できる

templateタグにshadowroot属性を使ってShadow Rootを宣言する

このように書くと

code:html

<host-element>

</template>

<h2>Light content</h2>

</host-element>

このようなDOMツリーになる

code:html

<host-element>

<slot>

↳

<h2>Light content</h2>

</slot>

</host-element>

なかなか進んでいないように見えていたが、仕様策定も進み、SafariのTechnology Previewにも入り、Firefoxにも実装されつつあるようなので、ようやく使える時が来そうだ